<template>
	  <view @click="detail(item)"  :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in virtualList" class="user-card">
	  	 <view class="avatar-box">
	  		<uv-avatar shape="square" size="80" :src="item.avatar"></uv-avatar>
	  		<view class="voice-play" v-if="item.sound">
	  			<voice-play 
	  				:src="item.sound"
	  				:sec="item.soundTime" 
	  				@tap.stop="playAudio(item)" 
	  				:isPlay="item.id == playId"
	  			></voice-play>
	  		</view>
	  	 </view>
	  	 <view class="right-box">
	  		 <view class="top-box">
	  			 <view class="nickname-box">
	  				 <view class="nickname">{{item.nickname}}</view>
	  				 <view class="sex-nv" v-if="item.sex == 1">
						 <uv-icon name="woman" size="16" color="var(--text-main)"></uv-icon>
						{{item.age}}·萝莉音
	  				 </view>
					 <view class="sex-nan" v-if="item.sex == 0">
						  <uv-icon name="man" size="16" color="var(--text-main)"></uv-icon>
						 {{item.age}}·大叔音
					 </view>
	  			 </view>
	  		 </view>
	  		 <view class="tag-list">
	  			<view class="tag-box">
					<view class="tag" v-for="(categoryName, index) in item.categoryNameList.slice(0, 3)" :key="index">{{categoryName}}</view>
	  			</view>
	  		 </view>
	  		 <view class="note-box">
	  			<view class="text">{{item.intro}}</view>
	  		 </view>
			 <view class="pay-box">
			 	<view>
					<image class="icon-img" src="/static/images/icon_diamond.png"></image>
					<text>100/单</text>
			 	</view>
				<view>
					 <uv-button icon="phone" text="和ta连线" color="linear-gradient(120deg, #c2e9fb 0%, #a1c4fd 100%)" shape="circle"  size="small" customTextStyle="{color:'#cecece'}"></uv-button>
				</view>
			 </view>
	  	 </view>
	  </view>
	  
	  <!-- 漂浮按钮 -->
<!-- 	   <view class="menu-btn">
		<view class="icon" @click="xiadan">
			<image class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/c50c079a74fcf57d5fbadc3b3354316eab6ce6de7ac382d5e0bb587bbffabbcf.png"></image>
		</view>
	  </view> -->
  
</template>

<script>
	import VoicePlay from '@/pages/tabbar/components/home/voicePlay.vue';
	import TuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
	import sheep from '@/sheep';
	const audio = uni.createInnerAudioContext();
	export default {
		components: {
			VoicePlay,
			TuiBadge,
		},
		props: {
			virtualList: {
				type: Array,
				default: () => [],
			},
		},
		data() {
			return {
				playId: null,
			}
		},
		methods: {
			playAudio(e) {
				if(this.playId == e.id){
					this.playId = null;
					audio.stop();
					return;
				}
				this.playId = e.id;
				//语音自然播放结束
				audio.onEnded((res) => {
					this.playId = null;
				});
				audio.src = e.sound;
				audio.play();
			},
			detail(e) {
				this.$u.route({
					url: 'pages/clerk/detail/index',
					params: {
						id: e.id,
					}
				});
			},
			toApply() {
				uni.showModal({
				  title: '达人申请',
				  content: '请确认是否成年，未成年禁止申请，申请后会有客服添加进行微信实名认证！',
				  success: function (res) {
				    if (res.confirm) {
				      sheep.$router.go('/pages/clerk/apply/index');
				    }
				  },
				});
			},
			toKaidian() {
				uni.showModal({
				  title: '搭建同款',
				  content: '搭建同款请联系客服微信：rbtnet',
				  success: function (res) {
				    
				  },
				});
			},
			xiadan() {
				sheep.$router.go('/pages/worker/blind/index');
			},
			fenxiao() {
				uni.showModal({
				  title: '分销申请',
				  content: '点击邀请海报，生成海报，生成邀请码，邀请一人下单，可得下单20%佣金！',
				  success: function (res) {
				    if (res.confirm) {
				      sheep.$router.go('/pages/commission/index');
				    }
				  },
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user-card {
		max-width: 768rpx;
		padding: 15rpx;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		background-color:var(--bg-card);
		border-radius: 20rpx;
		display: flex;
		flex: 1;
		
	}
	
	.user-card:last-child {
		margin-bottom: 0;
	}
	
	.avatar-box {
		position: relative;
		display: flex;
		justify-content: center;
		background-color:var(--bg-card);

		.voice-play {
			position: absolute;
			bottom: 0;
		}
	}
	
	.right-box {
		display: flex;
		flex-direction: column;
		flex: 1;
		margin-left: 10px;
		min-width: 0;
		
		.top-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.nickname-box {
				display: flex;
				align-items: center;
				padding-left: 10rpx;
				.nickname {
					font-size: 30rpx;
					font-weight: bolder;
					margin-right: 4px;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					max-width: 200rpx;
				}
				.sex-nv{
					display: flex;
					align-items: center;
					background-color: #fc6076;
					border-radius: 20rpx;
					font-size: 26rpx;
					padding: 6rpx;
				}
				
				.sex-nan{
					display: flex;
					align-items: center;
					background-color: #2a5298;
					border-radius: 20rpx;
					font-size: 26rpx;
					padding: 6rpx;
				}
				
			}
		}
		
		.pay-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row;
			flex-wrap: nowrap;
			
			view {
				display: flex;
				align-items: center;
				gap: 8rpx;
				
				.icon-img {
					width: 40rpx;
					height: 40rpx;
				}
				
				text {
					font-size: 28rpx;
					color: var(--text-main);
				}
			}
		}
		
		.tag-list {
			display: flex;
			margin: 5rpx 0;
			
			.tag-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: row;
				flex-wrap: nowrap;
				gap: 10rpx;
				overflow: hidden;
				
				.tag{
					border: 1px solid #2a5298;
					border-radius: 20rpx;
					font-size: 26rpx;
					padding: 6rpx;
				}
			}
		}
		
		.note-box {
			display: flex;
			align-items: center;
			color: var(--text-main);
			font-size: 25rpx;
			
			.text {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				max-width: 100%;
			}
		}
	}
	
	
	.menu-btn {
		position: fixed;
		bottom: 220rpx;
		right: 25rpx;
		
		.icon {
			background-image:var(--bg-card);
			width: 90rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 100%;
			box-shadow: 0 0 10px #cccccc;
			margin-top: 70rpx;
		}
			
		.img {
			height: 80rpx;
			width: 80rpx;
			border-radius: 100%;
		}
	}
</style>